import { useEffect, useState } from 'react';
import Title from '../component/Title';
import './index.less';
import banner from '@/config/img/banner.png';
import { MoreData, objData } from './index.config';

const literatureWork = (props: any) => {
  const [newObj, setNewObj] = useState<any>({});
  const params: any = props.location.query.id;
  useEffect(() => {
    if (params) setNewObj(objData?.[params]);
  }, [params]);
  return (
    <div className="person-liter-work">
      <div className="banner">
        <img src={banner} alt="" />
      </div>
      <div className="person-content">
        <div className="person-title">雷剧人</div>
        <div className="person-hand-item">
          <div className="item-img">
            <img src={newObj.src} alt="" />
            <div className="item-title">{newObj.title}</div>
          </div>
          <div className="item-details">{newObj.details}</div>
        </div>
        <div className="more">
          <div className="more-title">更多作品</div>
          <div className="more-content">
            {MoreData.map((val) => {
              return (
                <div className="more-item">
                  <img src={val.img} alt="" />
                  <div className="more-title">{val.title}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};
export default literatureWork;
